<template>
<div>
    <Button type="success" @click.stop="show">添加章节</Button>
  <Drawer
    title="添加章节"
    v-model="isShow"
    width="360"
    :mask-closable="false"
  >
    <Form :label-width="80" style="padding:20px 20px">
      <FormItem label="章节名称:">
        <Input v-model="chapter.chapterName" placeholder="请填写章节名称" />
      </FormItem>
      <Form-item label="所属课程:">
                <Select v-model="chapter['course.id']" filterable>
                    <Option value="">【课程不限】</Option>
                <Option v-for="item in courseList" :value="item.id" :key="item.id">{{ item.courseName }}</Option>
                  </Select>
      </Form-item>
      <FormItem label="章节序号:">
        <InputNumber v-model="chapter.disOrder"/>
      </FormItem>
    </Form>
    <div style="text-align: center;">
      <Button style="margin-right: 8px" @click="reset">重置</Button>
      <Button type="primary" @click="add">确定添加</Button>
    </div>
  </Drawer>
  </div>
</template>
<script>
import {create} from '@/api/chapter'
export default {
    data(){
        return {
           isShow:false,
           chapter:{}
      }
    },
    computed:{
        courseList(){return this.$store.state.course.courseList}
    },
    methods:{
       show(){
           this.reset();
           this.isShow=true;
       },
       reset(){
           this.chapter={};
       },
       add(){
           create(this.chapter).then(()=>{
               this.isShow=false;
               this.$emit("on-refresh","章节添加成功！");
           })
       }
    }
}
</script>